<template>
  <div class="month-calendar">
    <div class="table">
      <dt class="header-row">
        <div class="column-header weekend" style="height: 68px;"> 周日 </div>
        <div class="column-header" style="height: 68px;"> 周一 </div>
        <div class="column-header" style="height: 68px;"> 周二 </div>
        <div class="column-header" style="height: 68px;"> 周三 </div>
        <div class="column-header" style="height: 68px;"> 周四 </div>
        <div class="column-header" style="height: 68px;"> 周五 </div>
        <div class="column-header weekend" style="height: 68px;"> 周六 </div>
      </dt>

      <dd class="cell-row">
        <div class="cell-container" v-for="(item,index) in dataList" @mouseover="mouseoverAction(index,item)" @click="itemClick(index,item)">
          <!--  past-shadow -->
          <div class="cell-body" :class="{'selected-head':item.isFirst,'selected':item.isOverFlow,'selected-last':item.isLast}"
            style="width: 122px; height: 112px;">
            <span class="date today" v-if="item.date == '2020-09-02'">今天1</span>
            <span class="date another-month" v-else>{{item.date.substr(8,10)}}</span>

            <div v-if="item.date == yudingDic.starttime" class="reservation-bar head" style="background-color: rgb(219, 81, 114);">
              <span class="name">xvxc</span>
              <p class="info ng-star-inserted">
                <span class="platform">爱彼迎</span><span class="nights">8晚</span></p>
            </div>
            <div v-else-if="dataformter(item.date)>dataformter(yudingDic.starttime) && dataformter(item.date) < dataformter(yudingDic.endtime)"
              class="reservation-bar" :class="{'selected':item.isOverFlow}" style="background-color: rgb(219, 81, 114);"></div>
            <div v-else-if="item.date == yudingDic.endtime" class="reservation-bar last" :class="{'selected':item.isOverFlow}"
              style="background-color: rgb(219, 81, 114);"></div>
          </div>
        </div>
      </dd>
    </div>
  </div>
</template>

<script>
  export default {
    // filters:{
    //     dataformter(dateStr){
    //         return new Data(dateStr).getTime();
    //     }
    // },
    data() {
      return {
        yudingDic: {
          starttime: "2020-09-01",
          endtime: "2020-09-06"
        },
        dataList: [{
            "house_id": 11180643,
            "date": "2020-08-30",
            "available": -2,
            "hostex_available": 1,
            "type": "past",
            "note": "",
            "reservation": "",
            "day_of_week": 0,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-08-31",
            "available": -2,
            "hostex_available": 1,
            "type": "past",
            "note": "",
            "reservation": "",
            "day_of_week": 1,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-01",
            "available": -2,
            "hostex_available": 1,
            "type": "past",
            "note": "",
            "reservation": "",
            "day_of_week": 2,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-02",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 3,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-03",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 4,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-04",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 5,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-05",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 6,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-06",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 0,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-07",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 1,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-08",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 2,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-09",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599016367694306",
            "day_of_week": 3,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-10",
            "available": 0,
            "hostex_available": 0,
            "type": "custom",
            "note": "",
            "reservation": "",
            "day_of_week": 4,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-11",
            "available": 0,
            "hostex_available": 0,
            "type": "custom",
            "note": "",
            "reservation": "",
            "day_of_week": 5,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-12",
            "available": 0,
            "hostex_available": 0,
            "type": "custom",
            "note": "",
            "reservation": "",
            "day_of_week": 6,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-13",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 0,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-14",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 1,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-15",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 2,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-16",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 3,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-17",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 4,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-18",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 5,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-19",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 6,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-20",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 0,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-21",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 1,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-22",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 2,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-23",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 3,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-24",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 4,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-25",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 5,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-26",
            "available": 0,
            "hostex_available": 0,
            "type": "reservation",
            "note": "",
            "reservation": "5-1599017321314132",
            "day_of_week": 6,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-27",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 0,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-28",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 1,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-29",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 2,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-09-30",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 3,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-10-01",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 4,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-10-02",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 5,
            "hostex_history_available": null
          },
          {
            "house_id": 11180643,
            "date": "2020-10-03",
            "available": 1,
            "hostex_available": 1,
            "type": "default",
            "note": "",
            "reservation": "",
            "day_of_week": 6,
            "hostex_history_available": null
          }
        ],
        isFirstSelect: false,
        isLastSelect: false,
        firstSelectIndex: 0
      }
    },
    methods: {
      dataformter(dateStr) {
        return new Date(dateStr).getTime();
      },
      itemClick(index, item) {
        // alert("sdafsdf")
        let that = this;

        if (this.isFirstSelect && this.isLastSelect) {
          this.isFirstSelect = false;
          this.isLastSelect = false;
          this.firstSelectIndex = 0;
          this.dataList.forEach(e => {
            e.isOverFlow = false;
            e.isLast = false;
            e.isFirst = false;
          });
          this.dataList = Object.assign([], this.dataList);
        }

        if (this.isFirstSelect) {
          // item.isLast = true;
          this.isLastSelect = true;
          // item.isOverFlow = true;
        } else {
          item.isFirst = true;
          item.isLast = true;
          this.isFirstSelect = true;
          this.firstSelectIndex = index;
        }
        item.isOverFlow = true;
        this.dataList = Object.assign([], this.dataList)
      },
      mouseoverAction(index, item) {

        if (this.isFirstSelect && !this.isLastSelect) {

          this.dataList.forEach(e => {
            if (!e.isFirst) {
              e.isOverFlow = false;
            }
            e.isLast = false;
            e.isFirst = false;
          });

          this.dataList = Object.assign([], this.dataList);

          if (this.firstSelectIndex > index) { //left
            for (let i = index; i <= this.firstSelectIndex; i++) {
              let curItem = this.dataList[i];
              curItem.isOverFlow = true;
            }
            this.dataList[this.firstSelectIndex].isFirst = false;
            this.dataList[this.firstSelectIndex].isLast = true;
            item.isFirst = true;
          } else { //right
            for (let i = this.firstSelectIndex; i <= index; i++) {
              let curItem = this.dataList[i];
              curItem.isOverFlow = true;
            }
            this.dataList[this.firstSelectIndex].isFirst = true;
            this.dataList[this.firstSelectIndex].isLast = false;
            item.isLast = true;
          }

          item.isOverFlow = true;

          this.dataList = Object.assign([], this.dataList)
        }
      }
    }
  }
</script>

<style>
  .month-calendar {
    box-sizing: border-box;
  }

  .month-calendar .table {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    box-shadow: 0 1px 8px 0 #eaf0fc;
    border-radius: 4px;
  }

  .month-calendar .table .header-row {
    display: flex;
    flex-direction: row;
    box-shadow: 0 1px 2px 0 #f0f0f0;
  }

  .month-calendar .table .header-row .column-header.weekend {
    color: #ff5147;
  }

  .month-calendar .table .header-row .column-header {
    width: 122px;
    height: 68px;
    text-align: center;
    line-height: 68px;
    font-size: 14px;
    color: #a2a2a2;
  }



  .month-calendar .table .cell-row:not(:last-child) {
    border-bottom: 1px solid #d9e6ff;
  }

  .month-calendar .table .cell-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
  }

  .month-calendar .table .cell-row .cell-container {
    margin-top: 1px;
    width: 122px;
    height: 112px;
  }


  .month-calendar .table .cell-row .cell-container .cell-body {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .month-calendar .table .cell-row .cell-container .cell-body {
    border-right: 1px solid #d9e6ff;
    border-bottom: 1px solid #d9e6ff;
  }



  .month-calendar .table .cell-row .cell-container .cell-body.past-shadow {
    background-color: #f3f3f3;
  }

  .month-calendar .table .cell-row .cell-container .cell-body.shadow {
    background: url(https://www.myhostex.com/assets/calendar/shadow-big.png) center/100% 100% no-repeat;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .date {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    color: #111112;
    font-weight: 700;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .date.another-month {
    color: #b8b8b8;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .date.today {
    color: #2c80f0;
    background-color: rgba(44, 128, 240, .1);
    border-radius: 30px;
    padding: 3px 5px;
    top: 9px;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar.head {
    left: 2px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }


  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar.selected.head {
    border-left: 2px solid #000;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar.selected {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }

  .month-calendar .table .cell-row .cell-container .cell-body.selected-head {
    border-left: 2px solid #2080f0;
  }

  .month-calendar .table .cell-row .cell-container .cell-body.selected-last {
    border-right: 2px solid #2080f0;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar.last {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
  }

  .month-calendar .table .cell-row .cell-container .cell-body.selected {
    border-top: 2px solid #2080f0;
    border-bottom: 2px solid #2080f0;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar .info,
  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar .name {
    white-space: nowrap;
    overflow: hidden;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar .nights {
    margin-left: 10px;
  }

  .month-calendar .table .cell-row .cell-container .cell-body .reservation-bar {
    position: absolute;
    padding: 8px;
    bottom: 16px;
    height: 48px;
    z-index: 2;
    font-size: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.5;
    left: -1px;
    right: 0;
    color: #fff;
  }
</style>
